<template>
  <div class="merchant-list">
    <!-- 添加包含回退按钮和标题的容器 -->
    <van-nav-bar left-arrow @click-left="goBack" title="特惠商户">
      <!-- 回退按钮 -->
      <template #left>
        <van-icon name="arrow-left"></van-icon>
      </template>
    </van-nav-bar>

    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <van-cell v-for="(item, index) in merchants" :key="index" title="金江天地足疗养生SPA" is-link>
        <template #icon>
          <img :src="item.image" alt="Merchant Image" style="width: 50px; height: 50px;">
        </template>
        <template #label>
          <div>距离：{{ item.distance }}km</div>
          <div>电话：{{ item.phone }}</div>
          <div>{{ item.address }}</div>
        </template>
        <template #right-icon>
          <van-button type="primary" size="mini" round @click="navigateTo(item)">一键导航</van-button>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {Button, Cell, List, NavBar, Icon} from 'vant';

const merchants = [
  {
    image: 'https://example.com/merchant1.jpg',
    distance: '1.58',
    phone: '023-12345678',
    address: '重庆市江北观音桥街道社区25号1-5-6'
  },
  // 更多商户信息...
];

const loading = ref(false);
const finished = ref(false);

function onLoad() {
  setTimeout(() => {
    if (merchants.length >= 10) {
      finished.value = true;
    }
    loading.value = false;
  }, 1000);
}

function navigateTo(merchant) {
  console.log(`Navigating to ${merchant.address}`);
}

// 添加回退功能
function goBack() {
  window.history.back();
}
</script>

<style scoped>
.merchant-list {
  padding: 10px;
}
</style>
